<script setup>
import { ref } from 'vue'
import api from '@/api'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh'
dayjs.locale('zh')
dayjs.extend(relativeTime)

const router = useRouter()
const route = useRoute()

const keyword = ref(route.query.keyword)

const materials = ref([])
const materialsPage = ref(1)
const materialsTotal = ref(0)
const materialsLoading = ref(false)
const materialsFinished = ref(false)
const materialsRefreshing = ref(false)

const getMaterials = async () => {
  materialsLoading.value = true
  materialsPage.value = 1
  materialsFinished.value = false
  materials.value = []
  materialsTotal.value = 0
  try {
    const resp = await api.get('ip/materials', { params: { keyword: keyword.value } })
    materials.value = resp.data
    materialsTotal.value = resp.total
    if (materials.value.length == resp.total) {
      materialsFinished.value = true
    }
  } catch (error) {
    console.error(error)
  }
  materialsLoading.value = false
  materialsRefreshing.value = false
}

const onLoad = async () => {
  if (!materialsFinished.value) {
    try {
      materialsPage.value += 1
      const resp = await api.get('ip/materials', { params: { page: materialsPage.value, keyword: keyword.value } })
      if (resp.data.length) {
        materials.value.push(...resp.data)
        materialsTotal.value = resp.total
      } else {
        materialsFinished.value = true
      }
    } catch (error) {
      console.error(error)
    }
  }
  materialsLoading.value = false
}

const onRefresh = async () => {
  getMaterials()
}

getMaterials()

const onSearch = () => {
  if (keyword.value) {
    getMaterials()
  }
}
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="input">
        <van-icon class="icon" name="search" />
        <input type="text" v-model.trim="keyword" placeholder="请输入关键词搜索素材" />
        <div class="btn" @click="onSearch">搜索</div>
      </div>
    </div>
    <van-pull-refresh class="list" v-model="materialsRefreshing" @refresh="onRefresh">
      <van-list v-model:loading="materialsLoading" :finished="materialsFinished" :finished-text="materials.length && !materialsLoading ? '没有更多了' : '未搜索到相关素材'" @load="onLoad">
        <div class="materials">
          <div class="material" v-for="item in materials" @click="router.push(`/ip/materials/${item.id}`)">
            <div class="body">
              <div class="title">{{ item.title }}</div>
              <div class="content">{{ item.content }}</div>
              <div class="footer">
                <div class="category-name">{{ item.category.name }}</div>

                <div class="count">
                  <img src="@/assets/img/sc.png" />
                  {{ item.favorite_count }}
                </div>

                <div class="count">
                  <img src="@/assets/img/tk.png" />
                  {{ item.video_count }}
                </div>
                <div class="count">{{ dayjs(item.created_at).fromNow() }}</div>
              </div>
            </div>
            <div class="image">
              <img :src="item.image" />
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    background-image: linear-gradient(360deg, #ffffff 0%, #e4efff 100%);
    overflow: hidden;
  }

  .input {
    border: 1px solid #d6dbe3;
    display: flex;
    margin: 2vw 6vw;
    border-radius: 50px;
    padding: 0.3vw;
    align-items: center;

    input {
      flex: 1;
      display: block;
      border: none;
      outline: none;
      background: none;
      padding-left: 1vw;

      &::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 3.5vw;
        color: rgba(0, 0, 0, 0.25);
        letter-spacing: 0;
        font-weight: 400;
      }
    }

    .icon {
      color: rgba(0, 0, 0, 0.25);
      font-size: 6vw;
      margin-left: 1.6vw;
    }

    .btn {
      background: #134bbb;
      font-family: PingFangSC-Regular;
      font-size: 3.5vw;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
      padding: 1.5vw 4vw;
      border-radius: 50px;
    }
  }

  .list {
    height: 100vh;
    flex: 1;
  }
}
</style>
